<template>
	<page-meta :page-style="'overflow:'+(popShow?'hidden':'visible')"></page-meta>
	<view class="detail-content">
		<headassy title="客户列表" :isTab="false" :isSearch="false"></headassy>
		
		<view class="tabs">
			<u-tabs :list="tabsLsit" @change="changeTab" lineHeight="6rpx" lineColor="#fd7400" :inactiveStyle="{color: '#000'}"
				:activeStyle="{color: '#fd7400'}" :current="tabIndex" :scrollable="false"></u-tabs>
		</view>
		
		<view class="main main-mb3">
			<!-- 客户信息 -->
			<view class="page-form-info" v-if="tabIndex==0">
				<view class="item-ul" >
					<view class="item-box">
						<view class="item u-flex" v-for="item in zjEndCustomer">
							<view class="left-list">
								{{item.name}}
							</view>
							<view class="right-list">
								{{item.data}}
							</view>
						</view>
					</view>
				</view>
				
				<view class="item-ul">
					<view class="item-li" v-for="item in endAddresses" :key="item.id">
						<view style="margin-bottom: 20rpx;">
							{{item.name}}   {{item.phone}}
						</view>
						<view style="font-size: 24rpx;color:gray">
							{{item.addressInfo}}
						</view>
					</view>
				</view>
			</view>
			<!-- 关联产品 -->
			<view class="page-form-product" v-if="tabIndex==1">
				<view class="item-ul u-flex" v-for="item in productList" :key="item.id">
					<img class="item-img" src="" alt="" />
					<view class="item-li">
						<view class="item-li-title u-flex-between">
							<view>{{item.materialsModel}}</view>
							<view class="cus-blue-tag">{{item.codeStatus}}</view>
						</view>
						<view class="item-li-text">机身编码：{{item.securityCode}}</view>
						<view class="item-li-text">激活时间：{{item.regTime}}</view>
						<view class="item-li-text">质保到期：{{item.endTime}}</view>
					</view>
				</view>
			</view>
			<!-- 工单信息 -->
			<view class="page-form-product" v-if="tabIndex==2">
				<view class="item-ul" v-for="item in workList" :key="item.id">
					<view class="item-li-title u-flex-between">
						<view>{{item.workNo}}</view>
						<view class="cus-blue-tag">{{item.status}}</view>
					</view>
					<view class="item-li-text" style="margin-bottom: 10rpx">产品名称：{{item.proMark}}</view>
					<view class="item-li-text u-flex-between" style="margin-bottom: 10rpx">
						<view style="font-size: 26rpx">
							申请：{{item.createDate}}
						</view>
						<view style="font-size: 26rpx">
							更新：{{item.updateTime}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabIndex: 0,				// 导航栏下标
				tabsLsit: [					// 导航栏
					{
						name: '客户信息',
						disabled: false,
						param: {}
					},
					{
						name: '关联产品',
						disabled: false,
						param: {}
					},
					{
						name: '工单信息',
						disabled: false,
						param: {}
					},
				],
				zjEndCustomer: [			// 用户信息
					{
						name: '识别编码',
						type: 'uuid',
						data: ''
					},
					{
						name: '客户名称',
						type: 'name',
						data: ''
					},
					{
						name: '绑定手机',
						type: 'phone',
						data: ''
					},
					{
						name: '绑定微信',
						type: '',
						data: ''
					},
					{
						name: '绑定邮箱',
						type: 'email',
						data: ''
					},
				],
				endAddresses: [],			// 用户信息-地址管理
				productList: [],			// 关联产品列表
				workList: [],				// 关联工单列表
				userId: '',					// 用户id
				popShow: false,				// 禁止穿透
			}
		},
		onLoad(e) {
			this.userId = e.id;
			this.custAccId = uni.getStorageSync('custAccid');
			this.acId = uni.getStorageSync('acId');
			
			this.getPullRefresh()
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.getPullRefresh()
		},
		methods: {
			// 下拉刷新请求数据
			getPullRefresh(){
				console.clear()
				this.getCustomInfo();
				this.getCustomProduct();
				this.getCustomWork();
				
				setTimeout(()=>{
					uni.stopPullDownRefresh()
				}, 2000)
			},
			
			changeTab(item) {
				this.tabIndex = item.index
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 200
				});
			},
			
			
			// 获取客户详情
			async getCustomInfo() {
				const res = await uni.$api.custom.getCustomInfo(this.custAccId,this.acId);
				if(res.code == 0) {
					this.endAddresses = res.data.endAddresses;
					this.zjEndCustomer.forEach(val => {
						if(val.type) {
							val.data = res.data.zjEndCustomer[val.type]
						}
					})
				}
			},
			// 获取客户关联产品
			async getCustomProduct() {
				const res = await uni.$api.custom.getCustomProduct(this.userId);
				if(res.code == 0) {
					this.productList = res.data;
				}
			},
			// 获取客户关联工单
			async getCustomWork() {
				const res = await uni.$api.custom.getCustomWork(this.userId);
				this.workList = res.data;
				console.log('获取客户关联工单----',res)
			},
			
		},
	}
</script>

<style lang="scss" scoped>
	/deep/.u-navbar--fixed {
		position: static !important;
	}
	
	.uni-button:after {
		border: none;
	}

	.u-nav-slot {
		display: flex;
		align-items: center;
	}

	/deep/.u-steps--column {
		padding-left: 22rpx;
	}

	/deep/.u-steps-item__content--column {
		border-bottom: 1px solid #eee;
	}

	/deep/.u-radio__icon-wrap {
		width: 48rpx !important;
		height: 48rpx !important;
	}

	.list-item {
		border-top: solid 1px #f6f6f6;
		line-height: 1.75;
		margin-left: 10px;
		padding: 3px 5px;
	}

	.detail-content {
		font-size: 28rpx;
		background-color: #f5f5f5;
		height: 100vh;
		position: relative;
		// padding-top: var(--status-bar-height);
		box-sizing: border-box;
		
		.tabs {
			background-color: #fff;
			margin-top: 10rpx;
			border-radius: 10rpx;
		}

		.main {
			border-radius: 10rpx;
			background-color: #f5f5f5;
			padding: 20rpx;
		}
		
		// 客户信息
		.page-form-info {
			border-radius: 10rpx;
			.item {
				align-items: center;
				margin: 0 10rpx;
				padding: 10rpx 0;
				.left-list {
					font-size: 30rpx;
					font-weight: 600;
					margin-right: 30rpx;
				}
			}
			.item-ul {
				margin-bottom: 20rpx;
				border-radius: 10rpx;
				.item-title {
					font-size: 32rpx;
					font-weight: 600;
					margin-right: 30rpx;
					margin: 20rpx 0;
				}
				.item-box {
					background: #fff;
					padding: 10rpx;
					border-radius: 10rpx;
				}
				.item-li {
					padding: 30rpx;
					margin-bottom: 20rpx;
					background: #fff;
					border-radius: 10rpx;
				}
			}
		}
		
		// 关联产品
		.page-form-product {
			
			.item-ul {
				background: #fff;
				margin: 10rpx 0;
				padding: 20rpx;
				align-items: center;
				
				.item-li {
					width: 100%;
				}
				
				.item-img {
					width: 160rpx;
					height: 160rpx;
					margin-right: 20rpx;
				}
				
				.item-li-title {
					margin: 10rpx 0;
					font-size: 32rpx;
				}
				
				.item-li-text {
					color: gray;
					font-size: 28rpx;
				}
			}
		}
		
		// 关联工单
		.page-form-work {
			
		}
		
	}
	
</style>